<template>
    <div class="album-info w" v-if="albumInfo != null">
        <div class="dt">
            <img :src="albumInfo.coverImgUrl">
            <div class="info">
                <div class="title">{{albumInfo.name}}</div>
                <div class="s">
                    <span class="iconfont">&#xe614;</span>
                    {{albumInfo.creator.nickname}}
                </div>
                <div class="lp">播放量：{{albumInfo.playCount}}</div>
                <div class="fxsj">创建时间：{{albumInfo.createTime | timers}}</div>
                <div class="fxsj">更新时间：{{albumInfo.updateTime | timers}}</div>
                <div @click="playSongAll" class="playSong">
                    <span class="iconfont">&#xe682;</span>
                    播放全部
                </div>
            </div>
        </div>

        <div class="jj">
            <div class="title">简介</div>
            <div class="direction">{{albumInfo.description}}</div>
        </div>

        <div class="dd">
            <div class="l">
                <div class="dt">
                    <div class="xh"></div>
                    <div class="gequ">歌曲</div>
                    <div class="geshou">歌手</div>
                    <div class="sj">时长</div>
                </div>
            </div>
            <div class="r">
                <div
                :key="index"
                :class="(index + 1) % 2 == 0 ? 'dd-style' : ''"
                v-for="(item, index) in albumInfo.tracks" 
                class="item">
                    <div class="xh">{{index + 1}}</div>
                    <div @click="playSong(item.id)" class="gequ">
                        <span class="iconfont">&#xe682;</span>
                        {{item.name}}
                    </div>
                    <div @click="jumpSingerInfo(item.ar[0].id)" class="geshou">{{item.ar[0].name}}</div>
                    <div class="sj">{{item.dt | songTimer}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 专辑id
            albumID: -1,
            // 专辑详情
            albumInfo: null,
            // 当前歌手id
            currentSingerID: 0,
            // 歌手其它专辑
            albumAll: null
        }
    },
    filters: {
        timers(t) {
            let time = new Date(t);
            return time.getFullYear() + '-' + (time.getMonth() + 1) +  '-' + time.getDate();
        },
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    },
    mounted() {
        this.albumID = location.hash.split('/');
        this.albumID = this.albumID[this.albumID.length - 1];
        this.getAlbumInfo();
    },
    methods: {
        // 获取专辑详情
        async getAlbumInfo() {
            let { data: res } = await this.$http.get('/playlist/detail', { params: { id: this.albumID } });
            this.albumInfo = res.playlist;
        },
        // 跳转到其他专辑
        jumpAlbumInfo(id) {
            window.scrollTo(0, 0);
            this.$router.push(`/album/info/${id}`);
            location.reload();
        },
        // 播放全部歌曲
        playSongAll() {
            this.$emit('playSongAll', this.albumInfo.tracks);
        },
        // 播放单曲
        playSong(id) {
            this.$emit('playSong', id);
        },
        // 跳转到歌手详情
        jumpSingerInfo(id) {
            this.$router.push(`/singer/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.album-info {
    padding-top: 40px;
}
.dt {
    display: flex;
    img {
        width: 250px;
        height: 250px;
    }
    .info {
        flex: 1;
        margin-left: 60px;
        .title {
            font-size: 30px;
        }
        .s {
            margin-top: 30px;
        }
        .s,
        .iconfont {
            cursor: pointer;
            font-size: 14px;
            &:hover {
                color: #48c686;
            }
        }
        .s,
        .lp,
        .lx,
        .cpgs,
        .fxsj {
            font-size: 14px;
            margin-bottom: 10px;
        }
        .playSong {
            margin-top: 20px;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            text-align: center;
            padding: 0 20px;
            background-color: #48c686;
            font-size: 14px;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            &:hover {
                background-color: #37b174;
            }
        }
    }
}

.dd {
    .l {
        .dt {
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 14px;
            color: #999;
            background-color: #fbfbfd;
            margin-top: 80px;
        }
    }
    .xh {
        flex: 1;
    }
    .gequ {
        flex: 5;
    }
    .geshou {
        flex: 3;
    }
    .sj {
        flex: 2;
    }
    .r {
        .item {
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 14px;
            color: #999;
            .gequ,
            .geshou {
                color: #000;
                cursor: pointer;
                &:hover {
                    color: #48c686;
                }
            }
        }
    }
}

.jj {
    margin-top: 50px;
    .title {
        font-size: 26px;
    }
    .direction {
        font-size: 14px;
        margin-top: 20px;
        line-height: 30px;
    }
}

.xszj {
    margin-top: 60px;
    .title {
        font-size: 26px;
    }
    .list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            width: 18%;
            margin-bottom: 20px;
            .pic {
                position: relative;
                width: 100%;
                height: 200px;
                cursor: pointer;
                &:hover .mask {
                    display: block;
                }
                .mask {
                    display: none;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .4);
                    &:hover .iconfont {
                        font-size: 60px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-weight: 700;
                        font-size: 10px;
                        opacity: 0;
                        transition: all .3s;
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .album-timer,
            .album-name {
                font-size: 16px;
            }
            .album-name {
                margin: 10px 0 6px 0;
                cursor: pointer;
                &:hover {
                    color: #51c88a;
                }
            }
            .album-timer {
                color: #999;
            }
        }
    }
}

.dd-style {
    background-color: #fbfbfd!important;
}
</style>